@charset "UTF-8";
/*
Author:康明飞 Description: 详情页
修改人:张禀奇 Description: 详情页
添加功能:详情页免费咨询弹层
*/

@import "../base/_common";
//@import "../components/title";
/*	商品评论	-张卫明	*/
//@import "comment/comment-list-child";
/*	咨询列表	-贺鑫伟	*/
//@import "consult/buy-ask-list";
body{
	color:#333;
}
.bread .title-blue{
	margin:26px 0 22px 0;
	.crumbs-arrow{padding:0px 5px;font-family: simsun;font-style: normal;}
}
//基本信息
.car-main{
	margin-top:22px;
	font-size:14px;
}
.car-preview{
	width:468px;
	min-height:510px;
	float: left;
	display:inline;
	position:relative;
}
%span{
	vertical-align: middle;
	display: table-cell;
	*display: block;
	color: #fff;
}
%label-width-height{
	width: 74px;
	padding: 5px 5px;
}
.tip-label{
	position: absolute;
	top: 0;
	left: 0;
	line-height: 150%;
	font-size: 16px;
	text-align: center;
	background: $color-red-1;
	//overflow: hidden;
	width:84px;

	&.tip-blue{
		background: $color-blue-1;
	}
	.label{
    	@extend %span;
    	@extend %label-width-height;
	}
	.ieLab{
		display:block;position:absolute;width:100%;text-align:center;left:0px;
	}
	.time-info{
		position:absolute;
		left:88px;
		top:0;
		padding:5px 5px;
		font-size:14px;
		background-color:#eee;
		width: 186px;
		word-break: break-all;
		line-height:24px;
	}
	.left-triangle{
		position:absolute;
		left:84px;
		top:8px;
		height: 0;
	    width: 0;
	    line-height: 0;
	    font-size: 0;
	    border: 9px dashed transparent;
	    border-left: 9px solid  $color-red-1;
	}
}
%rest-width-height{
	width: 40px;
	height: 40px;
}
.tip-rest{
	position:absolute;
	right:0;
	top:349px;
	text-align: center;
	line-height: 15px;
	overflow:hidden;
	@extend %rest-width-height;
	background: $color-gray-2;
	.rest{
    	@extend %span;
		@extend %rest-width-height;
	}
	.ieLab{
		display:block;position:absolute;width:100%;text-align:center;left:0px;
	}
}
%photo-width-height{
	width:470px;
	height:389px;
}
.car-photos{
	position:relative;
	background: #fff;
	@extend %photo-width-height;
	li{
		@extend %photo-width-height;
		position:absolute;
		left:0;
		top:0;
		visibility: hidden;
		img {
			margin-top:38px;
			width:470px;
			height:314px;
	        opacity:0.8;
	        transition:opacity 300ms linear;
	    }
	}
	.cur{
		visibility: visible;
		img{
	    	opacity:1;
	    }
    }
}
.car-tabs{
	position:relative;
	margin:0 0 0 -2px;
	padding-top:22px;
	width:470px;
	%width-height{
		width:92px;
		height:60px;
	}
	li{
		float:left;
		text-align: center;
		margin-left:2px;
		display: inline;
		position: relative;
		@extend %width-height;
		img {
			@extend %width-height;
		}
		em{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
			display: block;
			background: #000;
			opacity: 0.5;
		}
	}
}
.car-details{
	float:right;
	width:692px;
	position:relative;
	h1{
		font-size:22px;
	}

	.product-lab {
		top: 6px;
		right: 0px;
	}
}
.car-ad{
	padding: 5px 0 14px 0;
	color:$color-red-1;
}
//2016-01-27 迭代修改 落地首付、落地价
.car-price{
	position: relative;
	top:0;
	left:0;
	background:#f6f6f6;
	padding: 8px 10px 9px 10px;
	z-index:18;
	.summary-price{
		float: left;
		height:80px;
		width:172px;
		padding-top:10px;
		text-align:center;
		color:$color-gray-3;
		.price-title{
			display:inline-block;
			*display:inline;
			text-align: center;
			height:30px;
			width:92px;
			line-height: 30px;
			line-height: 34px\9;
			font-size: 16px;
			color: #fff;
			background-color:$color-blue-1;
			border-radius: 15px;
		}
		strong{
			display: block;
			font-size:24px;
			color:$color-blue-1;
			padding-top:13px;
		}
		.time-info{
			position:absolute;
			right:0;
			top:0;
			background: #e4e4e4;
			padding: 5px;
			border-radius: 3px;
			color:$color-gray-1;
		}
	}
}

//2016-01-27 落地首付、落地价表格部分
.price-discribe{
	position: relative;
	float: left;
	height: 48px;
	width: 462px;
	border:1px solid #f0f0f0;
	padding:12px 8px 28px 23px;
	background-color: #fff;
	table{
		text-align: center;
		height: 48px;
		width: 462px;
		font-size:14px;
		tr{
			height:24px;
			td.col-width{
				width:130px;
			}
			td.plus-sign{
				width:14px;
				font-size: 24px;
			}
		}
	}
	i{
		position: absolute;
		right:0;
		bottom: 0;
		cursor:pointer;
		height:28px;
		width:28px;
		//background:url(#{$imgurl-base}/mall/detail/icon-price-dis.png) no-repeat;
		@include iconItemNoSize($iconsDetail,"icon-price-dis-2.0",$extend:detailMaps);
	}
	.market-price{
		position: absolute;
		left: 23px;
		top: 60px;
		width:130px;
		color:$color-gray-3;
		font-size: 12px;
		text-align: center;
		.line-through{
			text-decoration: line-through;
			font-weight: normal;
		}
	}
}
//裸车价
.naked-car-price{
	background:#f9f7f7;
	padding: 10px 20px;
	.summary-price{
		position:relative;
		color:$color-gray-3;
		strong{
			font-size:24px;
			color:$color-blue-1;
			padding:0 10px 0 5px;
		}
		.zd-price{
			text-decoration: line-through;
			padding-right: 10px;
		}
		a{
			color:$color-blue-3;
			text-decoration: underline;
			&:hover{
				color: $color-blue-1;
			}
		}
		.time-info{
			position:absolute;
			right:0;
			top:0;
			background: #e4e4e4;
			padding: 5px;
			border-radius: 3px;
			color:$color-gray-1;
		}
	}
}

.car-choose{
	margin-top:20px;
	line-height: 32px;
	dl{
		padding-bottom:4px;
	}
	dt{
		float:left;
		display: inline;
		width:76px;
		text-align: right;
		color:$color-gray-3;
	}
	dd{
		float:left;
		display: inline;
		width:610px;
		color:$color-gray-2;
		em{color:$color-orange-1;}
	}
	.phone{
		color:#066666;
	}
	%width-height{
		height:16px;
	}
	li{
		border:1px solid $color-gray-4;
		border-radius:3px;
		text-align:center;
		line-height: 16px;
		margin:0 10px 4px 0;
		cursor: pointer;
		@extend %width-height;
		display: inline;
		position: relative;
		padding:5px 10px;
		float:left;
		&.cur{
			padding: 4px 10px;
			border:2px solid $color-red-1;
		}
		img{
			width:48px;
			@extend %width-height;
		}
	}
	.color-list,.gift-bag,.down-payment,.monthly-stage{
		b{
			//background: url(#{$imgurl-base}/mall/detail/icon-color-selected.png) no-repeat;
			@include iconItem($iconsDetail,"icon-color-selected",$extend:detailMaps);
			width:12px;
			height: 12px;
			position:absolute;
			display: block;
			visibility: hidden;
			bottom:0;
			right:0;
		}
		.cur{
			b{
				visibility: visible;
			}
		}
	}
	.car-credit,.sale-city{
		li{
			text-align: left;
			//padding-right:20px;
			z-index: 10;
			border:2px solid $color-red-1;
			i{
				//background: url(#{$imgurl-base}/mall/detail/icon-select-arrow-down.png) no-repeat;
				//width:7px;
				//height: 5px;
				@include iconItem($iconsDetail,"icon-select-arrow-down",$extend:detailMaps);
				position:absolute;
				display: block;
				top:11px;
				right:5px;
				transition: transform .1s ease-in 0s;
				-webkit-backface-visibility: hidden;
				&.cur{
					transform: rotate(180deg);
					transform-origin: 50% 30%;
				}
			}
		}
		.credit-list,.city-list{
			position:absolute;
			background:#fff;
			line-height:30px;
			left: -2px;
			top: 28px;
			border:2px solid $color-red-1;
			border-top:none;
			width: 100%;
			text-indent:7px;
			z-index: 10;
		}
		a{
			display: block;
			text-decoration: none;
			width:100%;
			margin:0;
			padding:0;
			color:$color-gray-3;
			&:hover{
				background:#ECECEC;
			}
		}
		em{color:$color-orange-1;}
	}
	.msg{
		background: #000;
		padding: 8px;
		position: absolute;
		text-align: left;
		z-index: 999;
		left: 50%;
		top: 32px;
		color:#fff;
		font-weight: normal;
		margin-left:-100px;
		width: 184px;
		line-height:20px;
		border-radius:3px;
		cursor:text;
		word-wrap:break-word;
		word-break:break-all;
	}
	.msg i{
		background: url(#{$imgurl-base}/detail/icon-arrow-black.gif) no-repeat;
		width: 9px;
		height: 5px;
		display: block;
		position: absolute;
		left: 50%;
		top: -5px;
		margin-left:-7px;
	}
	.sale-city li{
		padding-right:20px;
	}
	//礼品盒子 2016-01-27 商城迭代
	.gift-box{
		font-size:14px;
		padding:8px 0 16px;
		border-bottom: 1px dashed #cacaca;
		.gift-item{
			padding-bottom:4px;
			b{
				color:$color-orange-1;
				float: left;
				border:1px solid $color-orange-1;
				height:20px;
				line-height: 20px;
				padding:0 5px;
				text-align:center;
				font-weight: normal;
				margin-right:5px;
			}
			div{
				float:left;
				padding:1px 0;
				line-height: 20px;
				color: $color-gray-3;
				span{
					color:$color-orange-1;
				}
			}
			.show-used-car{
				cursor:pointer;
			}
			.used-car{
				vertical-align: middle;
				display: inline-block;
				cursor:pointer;
				height:22px;
				width:22px;
				//background: url(#{$imgurl-base}/mall/detail/icon-used-car.png) no-repeat;
				@include iconItemNoSize($iconsDetail,"icon-used-car-2.0",$extend:detailMaps);
			}
		}

	}
	.show-error{
		display:none;
		padding-left:20px;
		font-size:12px;
		position:relative;

		i.show-error-i{
			position: absolute;
			left:0;
			bottom: 9px;
			cursor:pointer;
			height:16px;
			width:16px;
			//background:url(#{$imgurl-base}/mall/detail/iicon-gt.png?20160322180636) no-repeat;
			@include iconItemNoSize($iconsDetail,"iicon-gt-2.0",$extend:detailMaps);
		}
	}
}
.car-order{
	position:relative;
	margin-top:20px;
	a{
		color:#fff;
		&:hover{
			color:#fff;
		}
	}
	//01-27 商城迭代修改；
	%btn-submit{
		position: relative;
		width:272px;
		height: 54px;
		line-height:60px\9;
		background: $color-blue-1;
		border:none;
		outline: none;
		border-radius:4px;
		font-size: 20px;
		color:#fff;
		padding:0 0 0 45px;
		text-align: left;
		.earnest{
			font-size:14px;
			padding-left:20px;
			/*
			position: absolute;
		    top: 17px;
		    right: 48px;
		    top: 17px\0;
		    */
		}
	}
	.btn-submit-notstart,.btn-submit-sellout{
		@extend %btn-submit;
		cursor:default;
		background: $color-gray-3;
	}
	.btn-submit{
		@extend %btn-submit;
		cursor:pointer;
		background: $color-blue-1;
	}
	.sell-count{
		padding-left: 10px;
		//vertical-align: bottom;
		color:$color-gray-3;
		i{
			display: inline-block;
			height:16px;
			width:16px;
			margin-right: 10px;
			//background: url(#{$imgurl-base}/mall/detail/icon-thumb-up.png) no-repeat left center;
			@include iconItemNoSize($iconsDetail,"icon-thumb-up",$extend:detailMaps);
		}
		b{
			color:$color-blue-3;
			//vertical-align: bottom;
			font-weight: normal;
		}
	}
}
.car-safe{
	margin-top:30px;
	.safe{
		color:$color-gray-3;
		margin-left:-19px;
		li{
			@include inline-block;
			position:relative;
			padding:0 0 8px 20px;
			margin-left:19px;
			i{
				position:absolute;
				display: block;
				left:0;
				top:2px;
			}
		}
		li.pl25{
			padding-left:25px;
		}

		%i-width-height{
			width:15px;
			height:15px;
		}
		.buy-4s{
			//background:url(#{$imgurl-base}/mall/detail/icon-safe-4s.png) no-repeat;
			//@include iconItemNoSize($iconsDetail,"icon-safe-4s",$extend:detailMaps);
			@include iconItemNoSize($iconsDetail,"icon-safe-a",$extend:detailMaps);
			@extend %i-width-height;
		}
		.double-cash{
			//background:url(#{$imgurl-base}/mall/detail/icon-safe-double.png) no-repeat;
			//@include iconItemNoSize($iconsDetail,"icon-safe-double",$extend:detailMaps);
			@include iconItemNoSize($iconsDetail,"icon-safe-b",$extend:detailMaps);
			@extend %i-width-height;
		}
		.double-server{
			//background:url(#{$imgurl-base}/mall/detail/icon-safe-server.png) no-repeat;
			//@include iconItemNoSize($iconsDetail,"icon-safe-server",$extend:detailMaps);
			@include iconItemNoSize($iconsDetail,"icon-safe-server-2.0",$extend:detailMaps);
			width:20px;
			@extend %i-width-height;
		}
		.all-safe{
			//background:url(#{$imgurl-base}/mall/detail/icon-safe-all.png) no-repeat;
			//@include iconItemNoSize($iconsDetail,"icon-safe-all",$extend:detailMaps);
			@include iconItemNoSize($iconsDetail,"icon-safe-c",$extend:detailMaps);
			@extend %i-width-height;
		}
	}
}
.short-share{
	padding-top:30px;
	color:$color-gray-3;
	%i-width-height{
		width:12px;
		height:13px;
	}
	li{
		cursor: pointer;
		padding-left: 18px;
		position:relative;
		@include inline-block;
		margin-right:19px;
		i{
			position:absolute;
			left:0;
			top:2px;
		}
		.share{
			//background:url(#{$imgurl-base}/mall/detail/icon-share.png) no-repeat;
			@include iconItemNoSize($iconsDetail,"icon-share-2.0",$extend:detailMaps);
			@extend %i-width-height;
		}
		.mobile{
			//background:url(#{$imgurl-base}/mall/detail/icon-mobile.png) no-repeat;
			@include iconItemNoSize($iconsDetail,"icon-mobile-2.0",$extend:detailMaps);
			@extend %i-width-height;
		}
	}
	.add-collection{
		.store{
			//background:url(#{$imgurl-base}/mall/detail/icon-store.png) no-repeat;
			@include iconItemNoSize($iconsDetail,"icon-store-2.0",$extend:detailMaps);
			@extend %i-width-height;
		}
	}
	.cancel-collection{
		.store{
			//background:url(#{$imgurl-base}/mall/detail/icon-store-hover.png) no-repeat;
			@include iconItemNoSize($iconsDetail,"icon-store-hover",$extend:detailMaps);
			@extend %i-width-height;
		}
	}
	//重置百度分享
	.bdshare-button-style0-24:after{
		content:"";
	}
	.bdshare-button-style0-24 .bds_more{
		float:none;
	}
	.bdshare-button-style0-24 a, .bdshare-button-style0-24 .bds_more{
		font-size: 14px;
		padding: 0;
		line-height: inherit;
		height: inherit;
		background:none;
		cursor: pointer;
		margin: 0;
		color:$color-gray-3;
		text-decoration: none;
	}
}
.tips-common{
	width:320px;
	text-align:center;
}
.tips-hasorder{
	width:350px;
	.button-blue{
		color: #fff;
		cursor: pointer;
		display: block;
		font-size: 14px;
		font-weight: bold;
		margin:0;
		padding:0;
		width: 120px;
		margin:0 auto;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 3px;
		background-color: $color-blue-3;
		border: 0px;
		margin: 0 auto;
		margin-top:20px;
	}
}

//01-27 迭代 落地价、落地首付表格
.constitute-money{
	display: none;
	position:absolute;
	top:108px;
	right:0;
	z-index:5;
	background-color:#000;
	opacity:0.8;
	filter:alpha(opacity=80);
	padding:10px;
	font-size: 12px;
	color:#fff;
	ul{
		float: left;
		border-left: 1px solid #fff;
		li{
			padding:5px 5px 2px 5px;
			width:200px;
			span{
					display: inline-block;
					width:140px;
				}

		}
		li.title{
				font-size: 14px;
				border-bottom: 1px solid #fff;
			}
	}
	.insurance-item{
		border-left: 0;
	}
	.top-triangle{
		position:absolute;
		right: 20px;
    	top: -17px;
		height: 0;
	    width: 0;
	    line-height: 0;
	    font-size: 0;
	    border: 9px dashed transparent;
	    border-bottom: 9px solid #000;
	    opacity:0.8;
		filter:alpha(opacity=80);
	}
}

//详情页主体
@import "detail/_detail-content";

/*	价格曲线	-贺鑫伟	*/

.price-trend-box{

	position:relative;
	display:inline-block;
	color: $color-txt-1;
	font-size: 12px;
	font-style: normal;
	#price-trend {
		display: inline-block;
		color: $color-main;
		font-size: 12px;
		font-style: normal;
		position: relative;
		text-decoration: none;
		.price-info {
			display: inline-block;
			padding-right: 20px;
			background-image: url(#{$imgurl-base}/detail/price-trend-2.0.png);
			background-repeat: no-repeat;
			background-position: right;
		}

	}
	.price-tips:before,.price-tips:after{
	    content:"";display:block;
	    border-width: 0 5px 9px;
	    position:absolute;
	    top:-9px;
	    left:6px;
	    border-style:dashed dashed solid;
	    border-color:transparent transparent $color-border-1;
	    font-size:0;
	    line-height:0;
	}
	.price-tips:after{
	    top:-7px;
	    border-color:transparent transparent #fff;
	}

	.price-tips {
		display: inline-block;
		position: absolute;
		padding-left: 7px;
		width: 118px;
		line-height: 20px;
		top: 26px;
		left: 9px;
		border: 1px solid $color-border-1;
		border-radius: 1px;
		.price-tips-close {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-left: 6px;
			background-image: url(#{$imgurl-base}/detail/price-tips-close-2.0.png);
			background-repeat: no-repeat;
		}
	}
}

.chart-container {
	z-index: 60;
	position: absolute;
	top: 30px;
	right: -378px;
}
.chart-container:before,.chart-container:after{
    content:"";
    display:block;
    border-width:18px;
    position:absolute;
    top:-36px;
    left:254px;
    border-style:dashed dashed solid;
    border-color:transparent transparent #cccccc;
    font-size:0;
    line-height:0;
}
.chart-container:after{
    top:-33px;
    border-color:transparent transparent #fff;
}
// 大额支付按钮
.car-order{
	.order-fullPayment{
		padding-left:0;
		text-align:center;
	}
}


